<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>开票信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="address-rece container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right">
                <!--        <div style="height:91px;"></div>-->
                <div class="line-ti">
                    <div>开票信息管理</div>
                </div>
                <div style="height:30px"></div>
                <el-date-picker v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange" erange-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                <ul class="ul">
                    <div class="li" v-for="(item,index) in listSource" :key="index" @click="itemClick(index)">
                        <img class="left-img" :src="item.check?$global.Image.icon_checked:$global.Image.icon_checked_grey" alt="">
                        <div class="right-itm">
                            <div>订单名称：{{item.order_name}}</div>
                            <div>订单编号：{{item.order_id}}</div>
                            <div>订单金额：{{item.pay_price}}</div>
                            <div>订单时间：{{item.create_time}}</div>
                        </div>
                    </div>
                </ul>
                <div class="nodata" v-if="listSource.length == 0">
                    <img :src="$global.Image.noOrder" />
                </div>
                <div class="pagination-box">
                    <el-pagination background layout="prev, pager, next" @current-change="_handelClickPage" :total="count1" :page-size="limit"></el-pagination>
                </div>
                <div class="btm-choose">
                    <div class="all-choose" @click="checkAlls">
                        <img :src="checkAll?$global.Image.icon_checked:$global.Image.icon_checked_grey" alt="">
                        <div>全选</div>
                    </div>
                    <div class="btn-rs">
                        <div class="btn-r-price">开票金额：<span>￥{{price}}</span></div>
                        <div class="btn-r-submit" @click="dialogTableVisible = true">提交</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 200px"></div>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData" ref="singleTable" highlight-current-row @current-change="handleCurrentChange">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column property="name" label="开票名称" width="150"></el-table-column>
                <el-table-column property="phone" label="开票手机号" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
            <div class="pagination-box" v-if="gridData.length != 0">
                <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="limit" :total="count">
                </el-pagination>
            </div>
            <el-button type="primary" class="btn" @click="submit">开票</el-button>
        </el-dialog>
    </div>
</template>

<script>
import leftNavBar from "@components/leftNavBar";
import {
    getAddressList,
    getAddressRemove,
    getAddressDefaultSet,
    invoiceOrderList,
    invoiceIssue,
    getInvoiceList,
} from "@api/user";

export default {
    components: {
        leftNavBar,
    },
    data() {
        return {
            active: 7,
            page: 1,
            currentRow: "",
            pages: 1,
            limits: 10,
            gridData: [],
            dialogTableVisible: false,
            value1: "",
            limit: 10,
            addressList: [],
            count1: 0,
            price: 0,
            checkAll: false,
            time_range: "",
            orderid: [],
            count: 0,
            addressType: "",
            listSource: [],
        };
    },
    watch: {
        // 弹出提交订单
        dialogTableVisible(n) {
            console.log(n);
            if (n) {
                let orderid = this.orderid;
                let listSource = this.listSource;
                for (let i = 0; i < listSource.length; i++) {
                    if (listSource[i].check) {
                        orderid.push(listSource[i].order_id);
                    }
                }
                if (orderid.length == 0) {
                    this.dialogTableVisible = false;
                    return this.$dialog.toast({ mes: "选择至少一个开票订单" });
                }
                this.orderid = orderid;
            }
        },
    },
    mounted() {
        this.getinvoiceOrderList();
        this.invoiceList();
    },
    methods: {
        // 换页面
        _handelClickPage(e) {
            console.log(e);
            this.page = e;
            this.getinvoiceOrderList();
        },
        // 订单点击
        itemClick(index) {
            this.listSource[index].check = !this.listSource[index].check;
            this.checkA();
            this.$forceUpdate();
        },
        // 开票人变更
        handleCurrentChange(val) {
            console.log(val);
            this.currentRow = val.id;
        },
        // 全选
        checkA() {
            let total = 0;
            this.price = 0;
            let list = [];
            let listSource = this.listSource;
            for (let i = 0; i < listSource.length; i++) {
                if (listSource[i].check) {
                    list.push(listSource[i]);
                    total += Number(listSource[i].pay_price);
                }
                this.price = total.toFixed(2);
            }
            if (list.length == listSource.length) {
                this.checkAll = true;
            } else {
                this.checkAll = false;
            }

            this.$forceUpdate();
        },
        // 获取开票人列表
        invoiceList() {
            let that = this;
            getInvoiceList({ page: that.pages, limit: that.limits }).then(
                (res) => {
                    that.gridData = res.data.list;
                    that.count = res.data.count;
                }
            );
        },
        // 选择一个开票信息
        submit() {
            let that = this;
            let currentRow = that.currentRow;
            if (!currentRow) {
                return that.$dialog.toast({ mes: "选择至少一个开票信息" });
            }
            let data = {
                order_id: that.orderid.join(","),
                invoice_id: currentRow,
            };
            invoiceIssue(data)
                .then((res) => {
                    if (res.status == 200) {
                        that.$dialog.toast({ mes: "提交成功" });
                        setTimeout(() => {
                            window.location.reload();
                        }, 1500);
                        return;
                    }

                    return that.$dialog.toast({ mes: res.msg });
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 计算价格
        checkAlls() {
            let total = 0;
            if (this.checkAll) {
                this.listSource.map((item, index) => {
                    item.check = false;
                    this.checkAll = false;
                });
            } else {
                this.listSource.map((item, index) => {
                    item.check = true;
                    total += Number(item.pay_price);
                    this.checkAll = true;
                });
            }
            this.price = total;
            this.$forceUpdate();
        },
        /**
         * 获取地址列表
         *
         */
        AddressList() {
            let that = this;
            getAddressList({ page: that.page, limit: that.limit }).then(
                (res) => {
                    that.addressList = res.data;
                }
            );
        },
        //删除窗口
        openDel(index) {
            this.$confirm("确定要删除此地址吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.delAddress(index);
            });
        },
        // 获取订单列表
        getinvoiceOrderList() {
            let data = {
                time_range: this.time_range,
                page: this.page,
                limit: this.limit,
            };
            invoiceOrderList(data)
                .then((res) => {
                    console.log(res);
                    this.count1 = res.data.count;
                    this.listSource = res.data.list;
                    if (this.gridData.length != 0) {
                        this.gridData.map((item, index) => {
                            item.check = false;
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 日期更改
        dateChange(e) {
            console.log(e);

            this.page = 1;
            if (!e) {
                this.time_range = "";
            } else {
                this.time_range = e[0] + "," + e[1];
            }

            this.count1 = 1;
            this.getinvoiceOrderList();
        },
    },
};
</script>
<style>
.yd-dialog-black-mask,
.yd-dialog-white-mask {
    z-index: 99999;
}
.btn {
    margin: 20px 0 0 auto;
    display: block;
    background: #da213d;
    border: 0;
}
.btn:hover {
    background: #da213d;
    border: 0;
}
.btn:active {
    background: #da213d;
    border: 0;
}
.btn:focus {
    background: #da213d;
    border: 0;
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.address-rece {
    /*width: 70%;*/
    margin: 0 auto;
    display: flex;

    .right {
        width: 1000px;
        margin-left: 32px;

        .line-ti {
            width: 100%;
            border-bottom: 1px solid #dbdbdb;
            position: relative;
            &::before {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 72px;
                height: 3px;
                content: "";
                background: $color;
            }
            > div {
                color: #da213d;
                font-size: 18px;
                font-family: MicrosoftYaHei-Bold;
                // width: 90px;
                line-height: 36px;
                font-weight: 600;
                // text-align: center;
            }
        }
        .btm-choose {
            display: flex;
            width: 100%;
            height: 80px;
            border: 1px solid #efc2c1;
            align-items: center;
            padding: 0 30px 0 20px;
            margin-top: 30px;
            box-sizing: border-box;
            justify-content: space-between;
            .all-choose {
                display: flex;
                align-items: center;
                cursor: pointer;
                img {
                    width: 13px;
                    height: 13px;
                }
                div {
                    font-size: 16px;
                    color: #333333;
                    margin-left: 20px;
                }
            }
            .btn-rs {
                display: flex;
                align-items: center;
                .btn-r-price {
                    font-size: 16px;
                    color: #666666;

                    span {
                        font-size: 20px;
                        color: #da213d;
                    }
                }
                .btn-r-submit {
                    width: 150px;
                    height: 49px;
                    cursor: pointer;
                    margin-left: 30px;
                    background: linear-gradient(
                        143deg,
                        #da213d 0%,
                        #da213d 100%
                    );
                    border-radius: 5px;
                    font-size: 18px;
                    color: #ffffff;
                    line-height: 49px;
                    text-align: center;
                }
            }
        }
        .ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .li {
                cursor: pointer;
                margin-top: 30px;
                width: 440px;
                height: 120px;
                display: flex;
                align-items: center;
                border: 1px solid #eaa090;
                border-radius: 5px;
                padding: 13px 20px;
                box-sizing: border-box;
                .left-img {
                    width: 13px;
                    height: 13px;
                    margin-right: 20px;
                }
                .right-itm {
                    div {
                        font-size: 13px;
                        color: #333333;
                        margin-bottom: 7px;
                        &:first-child {
                            text-overflow: -o-ellipsis-lastline;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                        }
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}
</style>
